<style lang="less">
.map-box{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: 99;
	
	img{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100%;
		margin: auto;
	}
}
.ani-map-transition{
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
	opacity: 1;
}
.ani-map-enter,
.ani-map-leave{
	opacity: 0;
}
</style>
<template>
<ul class="more">
	<li class="map">
		<a target="_blank" href="javascript:;" v-on="click:isShow=!isShow">西邮地图</a>
	</li><li class="msg">
		<a target="_blank" href="http://ztc.xupt.edu.cn:8080/">信息直通车</a>
	</li><li class="book">
		<a target="_blank" href="http://sztz.xupt.edu.cn">素质拓展</a>
	</li>
</ul>
<div class="map-box" v-show="isShow" v-on="click:isShow=!isShow" v-transition="ani-map">
	<img src="../../static/images/map.png" alt="西邮地图">
</div>
</template>


<script>
module.exports = {
	data : function(){
		return {
			isShow : false
		}
	}
}
</script>